<template>
	<div class="tabbar">
		<!-- route: 是否开启路由模式, 手动输入地址, 可以正确对应tabbar -->
		<van-tabbar v-model="currentIndex" active-color="#ff9854" route>
			<template v-for="(item, index) in tabbarData" :key="index">
				<van-tabbar-item :to="item.path" icon="home-o">
					<span>{{ item.text }}</span>
					<template #icon>
						<img :src="getAssetURL(item.image)" alt="" v-if="currentIndex !== index" />
						<img :src="getAssetURL(item.imageActive)" alt="" v-else />
					</template>
				</van-tabbar-item>
			</template>
		</van-tabbar>
	</div>
</template>

<script setup>
	import tabbarData from '@/assets/data/tabbar'
	import { getAssetURL } from '@/utils/load_assets'
	import { ref, watch } from 'vue'
	import { useRoute } from 'vue-router'

	const route = useRoute()
	const currentIndex = ref(0)
	watch(route, (newValue) => {
		const index = tabbarData.findIndex((item) => item.path === newValue.path)
		if (index === -1) return
		currentIndex.value = index
	})
</script>

<style lang="less" scoped>
	.tabbar {
		// --van-tabbar-item-icon-size: 30px;
		/* /deep/ .van-tabbar-item__icon {
		  	font-size: 30px;
    } */
		:deep(.van-tabbar-item__icon) {
			font-size: 30px;
		}
	}
</style>
